<template>
	<div class="new-page" :style="`min-height: ${pageMinHeight}px`">
		<a-card style="margin-top: 24px">
			<div slot="title" class="listTitle">
				<span>寄售项目列表</span>
				<a-button @click="showModal(1,null)" type="primary" icon="plus">
					添加寄售项目
				</a-button>
			</div>

			<a-list item-layout="vertical" size="large" :pagination="{pageSize:5}" :data-source="projectList">
				<template #renderItem="item">
					<a-list-item key="item.title">
						<template #actions>
							<a-button v-if="item.projectShow != 1" @click="showList(item.projectShow,item.id)" type="primary" size="small">显示</a-button>
							<a-button v-else @click="showList(item.projectShow,item.id)" type="primary" size="small">隐藏</a-button>
							<!-- <a-button @click="showModal(2,item)" type="primary" size="small">修改</a-button> -->
							<a-popconfirm title="确认删除吗?" ok-text="确认删除" cancel-text="不删了" @confirm="delList(item.id)">
								<a-button type="danger" size="small">删除</a-button>
							</a-popconfirm>

						</template>

						<a-list-item-meta :description="'【'+ listType(item.type) +'】'+item.contact + ' · ' + item.price + '元'">
							<template #title>
								{{item.projectName}}
							</template>
							<template #avatar>
								<!-- <a-avatar size="large" src="https://cdn.zhoukaiwen.com/logo.png" /> -->
							</template>
						</a-list-item-meta>
							{{item.details}}
						<div style="margin: 20px 0 20px 0;display: flex; justify-content: space-between;">
							<div>
								<div v-if="item.imgList">
									<a-avatar v-for="(imgItem,index1) in item.imgList.split(',')" :key="index1"
										style="margin-right: 20px;margin-top: 10px;" shape="square" :size="50" :src="imgItem" />
								</div>
							</div>
						</div>
					</a-list-item>
				</template>
			</a-list>

			<!-- 修改弹出 -->
			<!-- wrap-class-name="full-modal" 全屏 -->
			<a-modal v-model:visible="visible" width="50%" :maskClosable='false'
				:title="modalTitle == 1 ? '修改寄售项目':'新增寄售项目'">
				<div>
					<a-form>
						<a-form-item label="标题" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-input v-model="projectName" placeholder="请输入标题" />
						</a-form-item>
						
						<a-form-item label="项目价格" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-input v-model="price" placeholder="寄售项目价格" />
						</a-form-item>
						<a-form-item label="项目类型" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-select v-model="projectType" placeholder="请选择">
								<a-select-option value="0">人工智能</a-select-option>
								<a-select-option value="1">区块链</a-select-option>
								<a-select-option value="2">微信开发</a-select-option>
								<a-select-option value="3">企业应用</a-select-option>
								<a-select-option value="4">WEB应用开发</a-select-option>
								<a-select-option value="5">手机/移动开发</a-select-option>
								<a-select-option value="6">服务器应用</a-select-option>
								<a-select-option value="7">数据库相关</a-select-option>
								<a-select-option value="8">游戏/娱乐</a-select-option>
								<a-select-option value="9">工具/插件</a-select-option>
								<a-select-option value="10">其他类型</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item label="项目内容" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-textarea v-model="details" rows="4" placeholder="寄售项目内容" />
						</a-form-item>

						<a-form-item label="联系方式" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-input v-model="contact" placeholder="寄售项目联系方式" />
						</a-form-item>
						<a-form-item label="体验链接" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<a-input v-model="projectUrl" placeholder="寄售项目体验链接" />
						</a-form-item>

						<a-form-item label="内容图片" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
							<div class="clearfix">
								<a-upload :customRequest="customRequest2" list-type="picture-card" :file-list="fileList2"
									@preview="handlePreview2" @change="coverImgDel2">
									<div v-if="fileList2.length < 8">
										<a-icon type="plus" />
										<div class="ant-upload-text">
											上传内容图
										</div>
									</div>
								</a-upload>
								<a-modal width="80%" :visible="previewVisible2" :footer="null" @cancel="handleCancel2">
									<img alt="example" style="width: 100%" :src="contentImg" />
								</a-modal>
							</div>
						</a-form-item>
					</a-form>

				</div>
				<template #footer>
					<a-button key="back" @click="handleOk">取消</a-button>
					<a-button key="submit" type="primary" @click="setData">确认</a-button>
				</template>

			</a-modal>
		</a-card>
	</div>
	</div>
</template>

<script>
	var requestUrl = 'http://192.168.0.101:8080/'
	import HeadInfo from '@/components/tool/HeadInfo'
	import axios from 'axios'
	import * as qiniu from 'qiniu-js'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'Demo',
		components: {
			HeadInfo
		},
		data() {
			return {
				projectList: [],
				fileList2:[],
				previewVisible2: false,
				contentImg:'',
				modalTitle: '新增/修改',
				visible: false,
				
				coverShow: false,
				
				projectName: '',
				projectType: undefined,
				price: '',
				details: '',
				contact: '',
				projectUrl: '',
				itemId: '', //修改时的id
			}
		},
		computed: {
			...mapState('setting', ['pageMinHeight']),
			desc() {
				return this.$t('description')
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			handlePreview2(file) {
				console.log(file)
				this.contentImg = file.url;
				console.log('handlePreview2')
				this.previewVisible2 = true;
			},
			coverImgDel2(e) {
				console.log('coverImgDel2');
				console.log(e.file.url);
				if(e.file.url){
					console.log('删除操作')
					const delUrl = e.file.url;
					this.fileList2 = this.fileList2.filter((list) => {
						return list.url !== delUrl
					})
					console.log(this.fileList2)
				}else{
					console.log('新增操作')
				}
				
			},
			handleCancel2() {
				console.log('handleCancel2')
				this.previewVisible2 = false;
			},
			// 内容图上传
			customRequest2(e) {
				console.log('customRequest2:', e);
				var that = this;
				axios.post(requestUrl +'api/upload').then(function(response) {
					if (response.data.code == 200) {
						console.log('response', response.data)
						const qnToken = response.data.message; //七牛云token
						const file = e.file; //上传的文件
						const putExtra = {};
						const config = {};
			
						const observable = qiniu.upload(file, file.filename, qnToken, putExtra, config)
						const observer = {
							next(res) {
								console.log(res);
							},
							error(err) {
								alert('上传失败')
							},
							complete(res) {
								console.log(res)
								const fileList = {
									uid: res.key,
									name: res.key,
									status: 'done',
									url: 'https://cdn.zhoukaiwen.com/' + res.key,
								}
								that.fileList2.push(fileList);
								console.log(that.fileList2)
							}
						}
						const subscription = observable.subscribe(observer)
					}
					return;
				})
			},
			getList() {
				const that = this
				axios.get(requestUrl + 'api/projectCons/list', ).then(function(res) {
					if (res.data.code == 200) {
						console.log(res.data)
						that.projectList = res.data.data;
					}
					return;
				})
			},
			// 删除列表
			delList(id) {
				var that = this;
				console.log(id)
				const delId = {
					"id": id
				}
				axios.post(requestUrl + 'api/projectCons/delete', delId, {
					headers: {
						'Content-Type': 'application/json',
					}
				}).then(function(response) {
					console.log('response', response)
					if (response.data.code == 200) {
						that.getList()
					}
					return;
				})
			},
			handleOk(e) {
				console.log('handleOk')
				this.visible = false;
			},
			// 显示弹窗：修改/新增
			showModal(type, item) {
				// 弹窗前,先清除页面原有数据;
				this.itemId = '';
				this.projectType = undefined;
				this.projectName = '';
				this.coverImg = '';
				this.details = '';
				this.contact = '';
				this.fileList2 = [];
				if (item) {
					// 修改
					this.modalTitle = 1;
					console.log(item)
					this.fileList = [
						{
							uid: item.img,
							name: item.img,
							status: 'done',
							url: item.img
						}
					];
					if(item.imgList){
						// console.log(item.imgList.split(','))
						for (let i = 0; i < item.imgList.split(',').length; i++) {
							const fileList = {
								uid: item.imgList.split(',')[i],
								name: item.imgList.split(',')[i],
								status: 'done',
								url: item.imgList.split(',')[i],
							}
							this.fileList2.push(fileList);
						}
					}
					this.itemId = item.id;
					this.projectType = item.type;
					this.projectName = item.title;
					this.coverImg = item.img;
					this.details = item.content;
					this.contact = item.author;
				} else {
					// 新增
					this.modalTitle = 2;
					this.itemId = '';
					this.projectType = undefined;
					this.projectName = '';
					this.coverImg = '';
					this.details = '';
					this.contact = '';
					this.fileList2 = [];
				}
				this.visible = true;
			},
			// 新增/修改方法
			setData() {
				var that = this;
				let contentList = '';
				for (let i = 0; i < this.fileList2.length; i++) {
					contentList += this.fileList2[i].url+ ",";
				}
				//去掉最后一个逗号(如果不需要去掉，就不用写)
				if (contentList.length > 0) {
					contentList = contentList.substr(0, contentList.length - 1);
				}
				console.log(contentList);
				if (this.modalTitle == 1) {
					console.log('修改')
					var changeData = {
						"id": this.itemId,
						"type": this.projectType,
						"title": this.projectName,
						"img": this.coverImg,
						"content": this.details,
						"author": this.contact,
						"imgList": contentList
					}
					console.log(changeData)
					return
					console.log(changeData)
					axios.post(requestUrl+ 'api/project/update', changeData, {
						headers: {
							'Content-Type': 'application/json',
						}
					}).then(function(response) {
						console.log(response)
						if (response.data.code == 200) {
							that.visible = false;
							that.getList();
						}
						return;
					})
				} else {
					console.log('新增')
					if (this.projectType == '' || this.projectName == '' || this.price == '' || this.contact == '') {
						this.$message.error('请完整输入内容');
						return false;
					}
					var addData = {
						"projectName": this.projectName,
						"type": this.projectType,
						"price": this.price,
						"contact": this.contact,
						"url": this.projectUrl,
						"details": this.details,
						"imgList": contentList
					}
					axios.post(requestUrl + 'api/projectCons/new', addData, {
						headers: {
							'Content-Type': 'application/json',
						}
					}).then(function(response) {
						console.log(response)
						if (response.data.data.id) {
							that.visible = false;
							that.getList()
						}
						return;
					})
				}
			},
			// 显示隐藏
			showList(type,id){
				var showData;
				if(type != 1){
					showData = {
						"id": id,
						"projectShow": 1,
					}
				}else{
					showData = {
						"id": id,
						"projectShow": 0,
					}
				}
				var that = this;
				
				axios.post(requestUrl + 'api/projectCons/update', showData, {
					headers: {
						'Content-Type': 'application/json',
					}
				}).then(function(response) {
					console.log(response)
					if (response.data.code == 200) {
						that.visible = false;
						that.getList()
					}
					return;
				})
			},
			listType(value){
				if (!value) {
					return;
				}
				if(value == 0){
					return '人工智能'
				}
				if(value == 1){
					return '区块链'
				}
				if(value == 2){
					return '微信开发'
				}
				if(value == 3){
					return '企业应用'
				}
				if(value == 4){
					return 'WEB应用开发'
				}
				if(value == 5){
					return '手机/移动开发'
				}
				if(value == 6){
					return '服务器应用'
				}
				if(value == 7){
					return '数据库相关'
				}
				if(value == 8){
					return '游戏/娱乐'
				}
				if(value == 9){
					return '工具/插件'
				}
				if(value == 10){
					return '其他'
				}
			}
		}
	}
</script>

<style lang="less">
	.listTitle {
		display: flex;
		justify-content: space-between;
	}

	.full-modal {
		.ant-modal {
			max-width: 100%;
			top: 0;
			padding-bottom: 0;
			margin: 0;
		}

		.ant-modal-content {
			display: flex;
			flex-direction: column;
			height: calc(100vh);
		}

		.ant-modal-body {
			flex: 1;
		}
	}

	.ant-list-item-extra {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
